<template>
  <label class="file-select">
      <div class="select-button">
        <span v-if="value">Selected File: {{value.name}}</span>
        <span v-else>Select File</span>
      </div>
    <input type="file" @change="handleFileChange" />
  </label>
</template>


<style scoped>
  .file-select > .select-button {
    padding: 1rem;
    color: white;
    background-color: #2EA169;
    border-radius: .3rem;

    text-align: center;
    font-weight: bold;
  }
  .file-select > input[type="file"]{
    display: none;
  }

</style>

<script>
  export default {
    props: {
      //接一个value
      value: File
    },
    methods:{
      handleFileChange(e){
        //触发一个input 配合v-model
        this.$emit('input',e.target.files[0]);
      }
    }
  }
</script>
